// components/reports/heart/index.ts
import * as echarts from '../../../components/ec-canvas/echarts'
import request from '../../../utils/request'

var chart: any = null
function initChart(canvas: any, width: any, height: any, dpr: any) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);
    return chart;
}
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        visitNo: {
			type: String,
            value: "",
            observer(newVal, oldVal) {
                this.getData()
            }
		}
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            onInit: initChart
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getData(){
            wx.showLoading({
                title: '加载中…',
            })

            let that = this;
            if(chart) {
                that.hr();
            } else {
                setTimeout(function(){
                    that.hr();
                }, 1000);
            }
            
        },

        hr() {
            request.get('/applet/bracelet/report/heart', {visitNo: this.data.visitNo}).then((res: any) => {
                wx.hideLoading()
                this.setData({
                    hrData: res.data.data
                })

                let { abscissa, heartRateAxis, lowWarnValue, highWarnValue} = this.data.hrData || {}
                let option = {
                    grid: {
                        left: '5%',
                        right: '9%',
                        bottom: '10%',
                        top: '5%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            realtime: true,
                            start: 0,
                            end: 100,
                            show: false
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: abscissa || [0],
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 150,
                    },
                    legend: {
                        data: ['脉率'],
                        left: 'center',
                        top: 'bottom',
                        icon: 'rect',
                        itemHeight: 8,
                        itemWidth: 8
                    },
                    series: [
                        {
                            name: '脉率',
                            data: heartRateAxis, 
                            type: 'line',
                            symbol: 'none', //不要折点
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(114, 46, 209, 0)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(114, 46, 209, 0.2)'
                                    }
                                ])
                            },
                            //折线颜色
                            // lineStyle: {
                            //     color: 'rgba(114, 46, 209, 1)'
                            // },
                            //折点颜色
                            itemStyle: {
                                color: 'rgba(114, 46, 209, 1)'
                            },
                            markLine: {
                                silent: true,
                                data: [
                                    {
                                        yAxis: lowWarnValue || 60,
                                        symbol: 'none',
                                        label: {
                                            fontSize: '10px',
                                            color: 'rgba(252, 125, 2, 1)',
                                            formatter: '{c}次'
                                        },
                                            lineStyle: {
                                            color: 'rgba(252, 125, 2, 1)',
                                        },
                                    },
                                    {
                                        yAxis: highWarnValue || 100,
                                        symbol: 'none',
                                        label: {
                                            fontSize: '10px',
                                            color: 'rgba(253, 1, 0, 1)',
                                            formatter: '{c}次'
                                        },
                                        lineStyle: {
                                            color: 'rgba(253, 1, 0, 1)',
                                        },
                                    },
                                ]
                            }
                        }
                    ],
                    visualMap: {
                        show: false,
                        pieces: [
                            {
                                gte: 0,
                                lt: lowWarnValue || 60,
                                color: 'rgba(252, 125, 2, 1)'
                            },
                            {
                                gte: lowWarnValue || 60,
                                lte: highWarnValue || 100,
                                color: 'rgba(114, 46, 209, 1)'
                            },
                            {
                                gt: highWarnValue || 100,
                                color: 'rgba(253, 1, 0, 1)'
                            }
                        ],
                        outOfRange: {
                            color: 'rgba(153, 153, 153, 1)'
                        }
                    },
                }
                chart.setOption(option);
            })
        },
    }
})